<script>
export default {
  name: "Child",
  data(){
    return{
      file: {},//头像
    }
  },
  methods:{
    //文件域中的文件发生变化，就会执行这个函数
    getFile(){
      let file = this.$refs.avatar.files[0];
      console.log(file)
      this.file = file;

    },
    //单击修改头像的按钮，就会执行这个函数
    updateAvatar(){
      //子组件传值给父组件：this.$emit
      //两个参数：第一个参数：自定义指令,这个指令在父组件中使用
      //第二个参数：传递的值
      this.$emit('getAvatar', this.file)
    }
  }
}
</script>

<template>
    <div class="child">
      <h3>我是子组件</h3>
      <div>
        <input ref="avatar" type="file" @change="getFile"><br>
        <button @click="updateAvatar" >修改头像</button>
      </div>
    </div>
</template>

<style scoped>
  .child{
    width: 100%;
    height: 200px;
    border: 2px solid blue;
    position: fixed;
    bottom: 0;
  }
</style>